<template>
  <PageWrapper>
    <template #headerContent> <WorkbenchHeader :loading="loading" :businessInfo="businessInfo" @success="workbenchHeaderSuccess" /> </template>
    <div class="lg:flex">
      <div class="lg:w-8/12 w-full !mr-4 enter-y">
        <ProjectCard :loading="loading" class="enter-y" :statisticsData="statisticsData" />
        <DynamicInfo :loading="loading" class="!my-4 enter-y" />
      </div>
      <div class="lg:w-4/12 w-full enter-y">
        <QuickNav :loading="loading" class="enter-y" />

        <Card class="!my-4 enter-y" :loading="loading">
          <a-row type="flex">
            <a-col :span="14" style="text-align: right;"><span style="font-size: 32px;">服务费率：</span></a-col>
            <a-col :span="10"><span style="font-size: 40px;color: #f5112f">{{parseFloat(businessInfo.taxRate*100).toFixed(2)}}%</span></a-col>
          </a-row>
          <a-row type="flex" style="margin-top: 30px;">
            <a-col :span="8" style="text-align: right;"><span style="font-size: 20px;">打款户名：</span></a-col>
            <a-col :span="16">
              <span style="font-size: 20px;">
                {{businessInfo.payName}}
                <a @click="handleCopy(businessInfo.payName)"><CopyOutlined class="mr-2" /></a>
              </span>
            </a-col>
          </a-row>
          <a-row type="flex" style="margin-top: 15px;">
            <a-col :span="8" style="text-align: right;"><span style="font-size: 20px;">打款账户：</span></a-col>
            <a-col :span="16">
              <span style="font-size: 20px;display:block;word-wrap: break-word;">
                {{businessInfo.payAccount}}
                <a @click="handleCopy(businessInfo.payAccount)"><CopyOutlined class="mr-2" /></a>
              </span>
            </a-col>
          </a-row>
          <a-row type="flex" style="margin-top: 15px;margin-bottom: 10px;">
            <a-col :span="8" style="text-align: right;"><span style="font-size: 20px;">　开户行：</span></a-col>
            <a-col :span="16">
              <span style="font-size: 20px;">
                {{businessInfo.payBankName}}
                <a @click="handleCopy(businessInfo.payBankName)"><CopyOutlined class="mr-2" /></a>
              </span>
            </a-col>
          </a-row>
        </Card>

        <Card title="充值计算器" :loading="loading">
          <a-row type="flex">
            <a-col :span="24" style="text-align: right;">
              <a-input-number size="large" v-model:value="formData.jsAmount" placeholder="请输入结算金额" style="width: 70%" />
              <a-button type="primary" size="large" preIcon="ant-design:search-outlined" @click="handleCzjs">计算</a-button>
            </a-col>
          </a-row>
          <a-row type="flex" style="margin-top: 30px;">
            <a-col :span="12" style="text-align: right;"><span style="font-size: 32px;">需充值：</span></a-col>
            <a-col :span="12"><span style="font-size: 38px;color: #f5872e">{{parseFloat(formData.needAmount).toFixed(2)}} 元</span></a-col>
          </a-row>
          <a-row type="flex" style="margin-top: 10px;margin-bottom: 10px;">
            <a-col :span="12" style="text-align: right;"><span style="font-size: 22px;">服务费：</span></a-col>
            <a-col :span="12"><span style="font-size: 22px;">{{parseFloat(formData.needFee).toFixed(2)}} 元</span></a-col>
          </a-row>
        </Card>
      </div>
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { Card } from "ant-design-vue";
import { CopyOutlined } from "@ant-design/icons-vue";
import { PageWrapper } from "/@/components/Page";
import WorkbenchHeader from "./components/WorkbenchHeader.vue";
import ProjectCard from "./components/ProjectCard.vue";
import QuickNav from "./components/QuickNav.vue";
import DynamicInfo from "./components/DynamicInfo.vue";
import { queryBusinessAccount, queryIndexStatistics } from "/@/api/sys/business.api";
import { handleCopy } from "/@/utils/common/compUtils";

const loading = ref(true);
  const businessInfo = ref<any>({});
  const formData = ref<any>({
    jsAmount: undefined,
    needAmount: '0.00',
    needFee: '0.00',
  });

  const statisticsData = ref<any>({
    accountBalance: 0.00,
    rechargeAmount: 0.00,
    serviceFee: 0.00,
    withdrawalAmount: 0.00,
    drawbackAmount: 0.00,
    drawbackServiceCharge: 0.00,
  });

  onMounted(async () => {
    //查询商户信息
    await queryBusinessAccount({}).then((res) => {
      businessInfo.value = res.result;
      setTimeout(() => {
        loading.value = false;
      }, 500);
      // console.log("[首页]商户信息：",businessInfo.value)
    });
    //查询统计数据
    await queryStatisticsData(null,null,null);
  });

  /**
   * 计算服务费和需充值的金额
   */
  function handleCzjs(){
    let amount = parseFloat(formData.value.jsAmount);//输入的待计算的金额
    let fee = businessInfo.value.taxRate;//费率
    if(amount > 0 && fee > 0){
      formData.value.needFee = parseFloat(amount*fee).toFixed(2);
      formData.value.needAmount = (parseFloat(amount) + parseFloat(formData.value.needFee)).toFixed(2);
    }else {
      formData.value.needFee = '0.00';
      formData.value.needAmount = '0.00';
    }
  }

  /**
   * 时间选择成功返回
   * @param data
   */
  function workbenchHeaderSuccess(data){
    // console.log("时间查询：",data)
    let startDate,endDate;
    if(data.rangeDateKey==='zdy'){
      startDate = data.rangeDate[0];
      endDate = data.rangeDate[1];
    }
    queryStatisticsData(data.rangeDateKey,startDate,endDate);
  }

  /**
   * 统计查询
   * @param dateType
   * @param timeBegin
   * @param timeEnd
   */
  function queryStatisticsData(dateType,timeBegin,timeEnd){
    queryIndexStatistics({dateType: dateType,timeBegin: timeBegin,timeEnd: timeEnd}).then((res) => {
      statisticsData.value = res.result;
      statisticsData.value.accountBalance = businessInfo.value.balance;
    });
    // console.log("查询数据：",statisticsData.value);
  }

</script>
